<template>
	<view class="product-inbound-container">
		<!-- 提交按钮区域 -->
		<view class="submit-section">
			<button class="submit-btn" @click="handleSubmit">
				<text class="submit-text">提交入库</text>
			</button>
		</view>

		<!-- 查询区域 -->
		<view class="query-section">
			<view class="query-header">
				<text class="query-title">查询入库单</text>

				<view class="query-tabs">
					<view class="tab-item" :class="{ active: currentTab === 'sn' }"
						@click="switchTab('sn')">
						扫码查询
					</view>
					<view class="tab-item" :class="{ active: currentTab === 'recptCode' }"
						@click="switchTab('recptCode')">
						单号查询
					</view>
					<view class="tab-item" :class="{ active: currentTab === 'record' }" @click="switchTab('record')">
						入库记录
					</view>
				</view>
			</view>

			<!-- 查询输入区域 -->
			<view class="query-input-area" v-if="currentTab !== 'record'">
				<view class="input-group" v-if="currentTab === 'sn'">
					<text class="input-label">扫描产品SN码</text>
					<view class="input-wrapper">
						<input class="query-input" v-model="queryData.snCode" placeholder="请扫描或输入产品SN码"
							@confirm="handleSnScanConfirm" />
						<view class="input-icon scan-icon" @click="startScan">
							<uni-icons type="scan" size="16" color="#007AFF"></uni-icons>
						</view>
						<view class="input-icon clear-icon" @click="clearSnCode">
							<uni-icons type="clear" size="16" color="#999"></uni-icons>
						</view>
					</view>
				</view>

				<view class="input-group" v-if="currentTab === 'recptCode'">
					<text class="input-label">输入入库单号</text>
					<view class="input-wrapper">
						<input class="query-input" v-model="queryData.recptCode" placeholder="请输入入库单号"
							@confirm="handleRecptCodeConfirm" />
						<view class="input-icon scan-icon" @click="startScan">
							<uni-icons type="scan" size="16" color="#007AFF"></uni-icons>
						</view>
						<view class="input-icon clear-icon" @click="clearRecptCode">
							<uni-icons type="clear" size="16" color="#999"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- SN信息卡片 -->
		<view class="sn-card-section" v-if="currentSnInfo && currentTab !== 'record'">
			<view class="sn-card">
				<view class="sn-card-header">
					<text class="sn-card-title">当前SN信息</text>
					<view class="sn-card-close" @click="closeSnCard">
						<uni-icons type="close" size="20" color="#999"></uni-icons>
					</view>
				</view>

				<view class="sn-card-content">
					<view class="sn-info-row">
						<text class="sn-info-label">SN:</text>
						<text class="sn-info-value">{{ currentSnInfo.sn }}</text>
					</view>
					<view class="sn-info-row">
						<text class="sn-info-label">产品编码:</text>
						<text class="sn-info-value">{{ currentSnInfo.itemCode }}</text>
					</view>
					<view class="sn-info-row">
						<text class="sn-info-label">产品名称:</text>
						<text class="sn-info-value">{{ currentSnInfo.itemName }}</text>
					</view>
					<view class="sn-info-row" >
						<text class="sn-info-label">外观编码:</text>
						<text class="sn-info-value">{{ currentSnInfo.snWgbm }}</text>
					</view>
					<view class="sn-info-row" >
						<text class="sn-info-label">电伏数:</text>
						<text class="sn-info-value">{{ currentSnInfo.snDf }}</text>
					</view>
					<view class="sn-info-row">
						<text class="sn-info-label">当前仓位:</text>
						<text class="sn-info-value">{{ currentSnInfo.warehouseName || '未设置' }}</text>
					</view>
					<view class="sn-info-row">
						<text class="sn-info-label">库区:</text>
						<text class="sn-info-value">{{ currentSnInfo.locationName || '未设置' }}</text>
					</view>
					<view class="sn-info-row">
						<text class="sn-info-label">库位:</text>
						<text class="sn-info-value">{{ currentSnInfo.areaName || '未设置' }}</text>
					</view>
					<view class="sn-info-row">
						<text class="sn-info-label">确认状态:</text>
						<text class="sn-info-value" :class="getConfirmStatusClass(currentSnInfo.confirmStatus)">
							{{ getConfirmStatusText(currentSnInfo.confirmStatus) }}
						</text>
					</view>
					<view class="sn-info-row" v-if="currentSnInfo.confirmStatus == 'Y'">
						<text class="sn-info-label">备注:</text>
						<text class="sn-info-value">{{ currentSnInfo.remark || '' }}</text>
					</view>
				</view>

				<!-- 仓位修改区域 -->
				<view class="location-edit-section" v-if="currentSnInfo.confirmStatus !== 'Y'">
					<view class="location-edit-header">
						<text class="location-edit-title">修改入库仓位</text>
					</view>
					<view class="location-edit-content">
						<view class="location-input-group">
							<text class="location-input-label">仓库/库区/库位:</text>
							<warehouse :warehouse-display-mode="warehouseDisplayMode"
								:location-display-mode="locationDisplayMode" :area-display-mode="areaDisplayMode"
								:scanned-area-code="scannedAreaCode" @selected="onWarehouseSelected" />
						</view>

						<!-- 添加备注输入区域 -->
						<view class="location-input-group">
							<text class="location-input-label">备注:</text>
							<view class="remark-input-wrapper">
								<textarea class="remark-textarea" v-model="locationRemark" placeholder="请输入备注信息（可选）"
									:maxlength="200" :show-confirm-bar="false" />
								<view class="remark-counter">{{ locationRemark.length }}/200</view>
							</view>
						</view>

					</view>
				</view>

				<!-- 操作按钮：合并为单个确认SN -->
				<view class="sn-card-actions" v-if="currentSnInfo.confirmStatus !== 'Y'">
					<button class="action-btn confirm-sn" @click="confirmCurrentSn">
						<uni-icons type="checkmarkempty" size="16" color="#fff"></uni-icons>
						<text>确认SN</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 入库单信息展示 -->
		<view class="inbound-info-section" v-if="inboundInfo && currentTab !== 'record'">
			<view class="info-header">
				<text class="info-title">入库单信息</text>
				<text class="info-status" :class="getStatusClass(inboundInfo.status)">
					{{ getStatusText(inboundInfo.status) }}
				</text>
			</view>
			<view class="info-content">
				<view class="info-row">
					<text class="info-label">入库单号:</text>
					<text class="info-value">{{ inboundInfo.recptCode }}</text>
				</view>
				<!-- <view class="info-row">
              <text class="info-label">入库单名称:</text>
          <text class="info-value">{{ inboundInfo.recptName }}</text>
        </view> -->
				<view class="info-row">
					<text class="info-label">工单号:</text>
					<text class="info-value">{{ inboundInfo.workorderCode }}</text>
				</view>
				<!-- <view class="info-row">
          <text class="info-label">工单名称:</text>
          <text class="info-value">{{ inboundInfo.workorderName }}</text>
        </view> -->
				<view class="info-row">
					<text class="info-label">入库日期:</text>
					<text class="info-value">{{ inboundInfo.recptDate }}</text>
				</view>
				<view class="info-row combined-row">
					<text class="info-label">总行数 / 总明细数:</text>
					<text class="info-value combined-value">{{ totalLines }} / {{ totalDetails }}</text>
				</view>
			</view>
		</view>

		<!-- 入库明细表格 -->
		<view class="details-section" v-if="recptLines.length > 0 && currentTab !== 'record'">
			<view class="section-header">
				<text class="section-title">入库明细</text>
				<text class="section-count">共{{ recptLines.length }}行</text>
			</view>

			<view class="details-table">
				<view class="table-header">
					<!--          <text class="table-cell">行号</text>-->
					<text class="table-cell">产品编码</text>
					<text class="table-cell">产品名称</text>
					<text class="table-cell">规格型号</text>
					<text class="table-cell">入库数量</text>
					<text class="table-cell">明细数</text>
					<text class="table-cell">确认进度</text>
					<text class="table-cell">操作</text>
				</view>
				<view class="table-body">
					<view v-for="line in recptLines" :key="line.lineId" class="table-row">
						<!--
            <text class="table-cell">{{ index + 1 }}</text>
-->
						<text class="table-cell">{{ line.itemCode }}</text>
						<text class="table-cell">{{ line.itemName }}</text>
						<text class="table-cell">{{ line.specification }}</text>
						<text class="table-cell">{{ line.quantityRecived }}</text>
						<text class="table-cell">{{ line.details ? line.details.length : 0 }}</text>
						<text class="table-cell">
							<text class="progress-text">
								{{ getConfirmProgress(line) }}
							</text>
						</text>
						<text class="table-cell">
							<button class="detail-btn" @click="showLineDetails(line)"
								:disabled="!line.details || line.details.length === 0">
								查看
							</button>
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 入库记录区域 -->
		<view class="inbound-records-section" v-if="currentTab === 'record'">
			<view class="records-header">
				<text class="records-title">入库记录</text>
				<view class="records-actions">
					<button class="refresh-btn" @click="refreshInboundRecords" :disabled="recordLoading">
							<uni-icons type="refresh" size="14" color="#fff"></uni-icons>
						<text>刷新</text>
					</button>
				</view>
			</view>


			<!-- 记录表格 -->
			<view class="records-table" v-if="inboundRecords.length > 0">
				<view class="table-header">
					<text class="table-cell">SN</text>
					<text class="table-cell">产品编码</text>
					<text class="table-cell">产品名称</text>
					<text class="table-cell">规格型号</text>
					<text class="table-cell">数量</text>
					<text class="table-cell">批次编码</text>
					<text class="table-cell">仓库</text>
					<text class="table-cell">库区</text>
					<text class="table-cell">库位</text>
					<text class="table-cell">确认人</text>
					<text class="table-cell">确认时间</text>
				</view>
				<view class="table-body">
					<view v-for="record in inboundRecords" :key="record.detailId" class="table-row" @click="showRecordDetail(record)">
						<text class="table-cell">{{ record.sn }}</text>
						<text class="table-cell">{{ record.itemCode }}</text>
						<text class="table-cell">{{ record.itemName }}</text>
							<text class="table-cell">{{ record.specification || '' }}</text>
							<text class="table-cell">{{ record.quantity }}</text>
							<text class="table-cell">{{ record.batchCode || '' }}</text>
							<text class="table-cell">{{ record.warehouseName || '' }}</text>
							<text class="table-cell">{{ record.locationName || '' }}</text>
							<text class="table-cell">{{ record.areaName || '' }}</text>
							<text class="table-cell">{{ record.confirmBy || '' }}</text>
						<text class="table-cell">{{ formatConfirmTime(record.confirmTime) }}</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-else-if="!recordLoading">
				<view class="empty-icon">
					<uni-icons type="list" size="48" color="#ccc"></uni-icons>
				</view>
				<text class="empty-text">暂无入库记录</text>
				<button class="empty-btn" @click="refreshInboundRecords">刷新</button>
			</view>

			<!-- 加载状态 -->
			<view class="loading-state" v-if="recordLoading">
				<view class="loading-icon">
					<uni-icons type="spinner-cycle" size="24" color="#007AFF"></uni-icons>
				</view>
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 分页控件 -->
			<view class="pagination-section" v-if="inboundRecords.length > 0">
				<view class="pagination-info">
					<text class="pagination-text">共 {{ recordTotal }} 条记录</text>
				</view>
				<view class="pagination-controls">
					<button class="pagination-btn" @click="goToPage(recordPageNum - 1)" 
						:disabled="recordPageNum <= 1 || recordLoading">
						<text>上一页</text>
					</button>
					<view class="page-input-wrapper">
						<input class="page-input" type="number" v-model.number="inputPageNum" 
							:placeholder="recordPageNum.toString()" @confirm="goToInputPage" />
						<text class="page-total">/ {{ Math.ceil(recordTotal / recordPageSize) }}</text>
					</view>
					<button class="pagination-btn" @click="goToPage(recordPageNum + 1)" 
						:disabled="recordPageNum >= Math.ceil(recordTotal / recordPageSize) || recordLoading">
						<text>下一页</text>
					</button>
				</view>
			</view>
		</view>

		<!-- SN详情弹窗 -->
		<view class="sn-detail-modal" v-if="showSnDetailModal" @click="closeSnDetailModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">SN明细信息</text>
					<view class="modal-close" @click="closeSnDetailModal">
						<uni-icons type="close" size="20" color="#666"></uni-icons>
					</view>
				</view>

				<view class="modal-body">
					<!-- 产品信息摘要 -->
					<view class="product-summary">
						<view class="summary-row">
							<text class="summary-label">产品编码:</text>
							<text class="summary-value">{{ currentLine && currentLine.itemCode }}</text>
						</view>
						<view class="summary-row">
							<text class="summary-label">产品名称:</text>
							<text class="summary-value">{{ currentLine && currentLine.itemName }}</text>
						</view>
						<view class="summary-row">
							<text class="summary-label">入库数量:</text>
							<text class="summary-value">{{ currentLine && currentLine.quantityRecived }}</text>
						</view>
					</view>

					<!-- SN明细表格 -->
					<view class="sn-detail-table">
						<view class="table-header">
							<text class="table-cell">SN</text>
							<text class="table-cell">确认状态</text>
							<text class="table-cell">操作</text>
						</view>
						<view class="table-body">
							<view v-for="snDetail in currentLineDetails" :key="snDetail.detailId" class="table-row">
								<text class="table-cell">{{ snDetail.sn }}</text>
								<text class="table-cell">
									<text class="status-tag" :class="getConfirmStatusClass(snDetail.confirmStatus)">
										{{ getConfirmStatusText(snDetail.confirmStatus) }}
									</text>
								</text>
								<text class="table-cell">
									<button class="confirm-btn" @click="confirmSn(snDetail)"
										:disabled="snDetail.confirmStatus === 'Y'">
										{{ snDetail.confirmStatus === 'Y' ? '已确认' : '确认' }}
									</button>
								</text>
							</view>
						</view>
					</view>

					<!-- 操作按钮 -->
					<view class="modal-actions">
						<button class="action-btn cancel" @click="closeSnDetailModal">关闭</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 入库记录详情弹窗 -->
		<view class="record-detail-modal" v-if="showRecordDetailModal" @click="closeRecordDetailModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">入库记录详情</text>
					<view class="modal-close" @click="closeRecordDetailModal">
						<uni-icons type="close" size="20" color="#666"></uni-icons>
					</view>
				</view>

				<view class="modal-body">
					<view class="record-detail-list">
						<view class="detail-row">
							<text class="detail-label">SN</text>
							<text class="detail-value">{{ currentRecord && currentRecord.sn || '' }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">产品编码</text>
							<text class="detail-value">{{ currentRecord && currentRecord.itemCode || '' }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">产品名称</text>
							<text class="detail-value">{{ currentRecord && currentRecord.itemName || '' }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">规格型号</text>
							<text class="detail-value">{{ currentRecord && currentRecord.specification || '' }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">数量</text>
							<text class="detail-value">{{ currentRecord && currentRecord.quantity || '' }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">批次编码</text>
							<text class="detail-value">{{ currentRecord && currentRecord.batchCode || '' }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">仓库</text>
							<text class="detail-value">{{ currentRecord && currentRecord.warehouseName || '' }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">库区</text>
							<text class="detail-value">{{ currentRecord && currentRecord.locationName || '' }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">库位</text>
							<text class="detail-value">{{ currentRecord && currentRecord.areaCode|| '' }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">确认人</text>
							<text class="detail-value">{{ currentRecord && currentRecord.confirmBy || '' }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">确认时间</text>
							<text class="detail-value">{{ currentRecord ? formatConfirmTime(currentRecord.confirmTime) : '' }}</text>
						</view>
						<view class="detail-row" v-if="currentRecord && currentRecord.remark">
							<text class="detail-label">备注</text>
							<text class="detail-value">{{ currentRecord.remark }}</text>
						</view>
					</view>

					<view class="modal-actions">
						<button class="action-btn cancel" @click="closeRecordDetailModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 产品入库页面组件
	 * 
	 * 功能说明：
	 * 1. 支持通过SN码或入库单号查询入库单信息
	 * 2. 支持扫描库位编码自动定位仓库位置
	 * 3. 支持修改SN的仓库、库区、库位和备注信息
	 * 4. 支持确认SN状态，完成入库操作
	 * 5. 支持提交整个入库单
	 * 
	 * 主要业务流程：
	 * 扫码查询 -> 选择SN -> 修改仓位信息 -> 确认SN -> 提交入库单
	 */

	import {
		getInboundBySnCode, // 根据SN码获取入库单信息
		getInboundByRecptCode, // 根据入库单号获取入库单信息
		scanInboundConfirm, // 扫码入库确认操作
		executeInbound, // 执行入库操作
		updateSnDetail, // 更新SN明细信息
			getConfirmDetail, // 分页查询已确认的入库明细记录
			confirmSnDetail // 确认SN并更新明细（仓位、备注、确认信息）
	} from '@/api/wm/productrecpt.js'
	import warehouse from './common/warehouse/warehouse.vue'
	import { initScan, startScan as startPdaScan, stopScan, isPdaScanAvailable } from '@/utils/pdaScan'

	export default {
		name: 'ProductInbound',
		components: {
			warehouse
		},
		data() {
			return {
				// ========== 页面状态控制 ==========
				currentTab: 'sn', // 当前标签页：sn(扫码查询) | recptCode(单号查询) | record(入库记录)

				// ========== 查询相关数据 ==========
				queryData: {
					snCode: '', // SN码输入
					recptCode: '' // 入库单号输入
				},

				// ========== 入库单信息 ==========
				inboundInfo: null, // 入库单基本信息
				recptLines: [], // 入库明细行数据
				totalLines: 0, // 总行数
				totalDetails: 0, // 总明细数

				// ========== SN详情弹窗相关 ==========
				showSnDetailModal: false, // 是否显示SN详情弹窗
				currentLine: null, // 当前选中的明细行
				currentLineDetails: [], // 当前行的SN详情列表

				// ========== SN信息卡片相关 ==========
				currentSnInfo: null, // 当前扫描的SN信息
				selectedWarehouseData: null, // 选中的仓库/库区/库位数据
				locationRemark: '', // SN备注信息

				// ========== 仓库选择器组件相关 ==========
				warehouseDisplayMode: 'name', // 仓库显示模式：'name'(名称) | 'code'(编码) | 'both'(名称+编码)
				locationDisplayMode: 'name', // 库区显示模式：'name'(名称) | 'code'(编码) | 'both'(名称+编码)
				areaDisplayMode: 'code', // 库位显示模式：'name'(名称) | 'code'(编码) | 'both'(名称+编码)
				scannedAreaCode: '', // 扫描的库位编码，用于自动定位库位

				// ========== 入库记录相关 ==========
				inboundRecords: [], // 入库记录列表
				recordPageNum: 1, // 当前页码
				recordPageSize: 10, // 每页大小
				recordTotal: 0, // 总记录数
				recordLoading: false, // 加载状态
				inputPageNum: 1, // 输入框中的页码

				// ========== 入库记录详情弹窗相关 ==========
				showRecordDetailModal: false,
				currentRecord: null
			}
		},

		// 生命周期钩子
		onLoad() {
			this.initPdaScanListener()
		},

		onShow() {
			// 页面显示时启动扫描监听
			this.startScanListener()
		},

		onHide() {
			// 页面隐藏时停止扫描监听
			this.stopScanListener()
		},

		onUnload() {
			// 页面卸载时清理资源
			this.cleanupScanListener()
		},

		computed: {
			// 是否可以更新仓位
			canUpdateLocation() {
				return this.selectedWarehouseData && this.selectedWarehouseData.warehouse && this.selectedWarehouseData
					.location && this.selectedWarehouseData.area
			}
		},


		methods: {
			// ========== PDA扫描监听相关方法 ==========

			/**
			 * 初始化PDA扫描监听
			 */
			initPdaScanListener() {
				console.log('初始化PDA扫描监听')

				// 检查PDA扫描功能是否可用
				if (isPdaScanAvailable()) {
					// 初始化广播扫描
					initScan(this.handlePdaScanResult)
					console.log('PDA广播扫描已初始化')
				}
			},

			/**
			 * 启动扫描监听
			 */
			startScanListener() {
				try {
					if (isPdaScanAvailable()) {
						startPdaScan()
						console.log('PDA广播扫描监听已启动')
					}
				} catch (error) {
					console.error('启动扫描监听失败:', error)
				}
			},

			/**
			 * 停止扫描监听
			 */
			stopScanListener() {
				try {
					if (isPdaScanAvailable()) {
						stopScan()
						console.log('PDA广播扫描监听已停止')
					}
				} catch (error) {
					console.error('停止扫描监听失败:', error)
				}
			},

			/**
			 * 清理扫描监听资源
			 */
			cleanupScanListener() {
				this.stopScanListener()
				console.log('PDA扫描资源已清理')
			},

			/**
			 * 处理PDA扫描结果
			 * @param {string} code - 扫描的条码
			 */
			handlePdaScanResult(code) {
				console.log('PDA红外扫描结果:', code)
				
				if (!code || !code.trim()) {
					console.log('扫描结果为空')
					return
				}
				
				const scanData = code.trim()
				
				// 根据当前查询类型设置对应的输入框
				if (this.currentTab === 'sn') {
					this.queryData.snCode = this.parseSn(scanData)
					// 自动处理扫描结果
					this.handleSnScanConfirm()
				} else if (this.currentTab === 'recptCode') {
					this.queryData.recptCode = scanData
					// 自动处理扫描结果
					this.handleRecptCodeConfirm()
				}
			},

			/**
			 * 解析SN（支持 itemCode*sn 或直接sn）
			 * @param {string} raw - 原始扫描数据
			 * @returns {string} 解析后的SN码
			 */
			parseSn(raw) {
				if (!raw) return ''
				const s = String(raw).trim()
				if (!s) return ''
				const parts = s.split('*')
				// 取最后一段作为SN，避免多段星号的情况
				return parts[parts.length - 1].trim()
			},

			// ========== 页面导航相关方法 ==========

			/**
			 * 切换标签页
			 * @param {string} tab - 标签页类型：'sn'(扫码查询) | 'recptCode'(单号查询) | 'record'(入库记录)
			 */
				switchTab(tab) {
					// 立即切换UI状态
					this.currentTab = tab
					
					// 如果切换到入库记录标签页，异步加载数据并清空查询相关数据
					if (tab === 'record') {
						// 清空查询相关的数据和状态
						this.currentSnInfo = null
						this.inboundInfo = null
						this.recptLines = []
						this.selectedWarehouseData = null
						this.locationRemark = ''
						this.scannedAreaCode = ''
						
						// 使用setTimeout进一步延迟数据加载，确保UI切换完成
						setTimeout(() => {
							this.loadInboundRecords()
						}, 50)
					} else {
						// 切换到查询标签页时，清空查询数据
						this.queryData.snCode = ''
						this.queryData.recptCode = ''
					}
				},

			// ========== 扫码相关方法 ==========

			/**
			 * 开始扫码操作
			 * 参考预入库页面的实现方式
			 */
			startScan() {
				// 使用uni.scanCode，这是更通用的扫码方式
				uni.scanCode({
					onlyFromCamera: true, // 只允许从相机扫码
					success: (res) => {
						console.log('扫码成功:', res)
						this.handleScanResult(res.result)
					},
					fail: (error) => {
						console.error('扫码失败:', error)
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						})
					}
				})
			},

			/**
			 * 处理扫码结果
			 * @param {string} result - 扫码结果字符串
			 */
			handleScanResult(result) {
				if (!result || !result.trim()) {
					uni.showToast({
						title: '扫码结果为空',
						icon: 'none'
					})
					return
				}

				// 根据当前查询类型设置对应的数据
				if (this.currentTab === 'sn') {
					this.queryData.snCode = this.parseSn(result)
				} else if (this.currentTab === 'recptCode') {
					this.queryData.recptCode = result
				}

				// 自动执行查询
				this.handleQuery()
			},

			// ========== 输入框清空方法 ==========

			/**
			 * 清空SN码输入框
			 */
			clearSnCode() {
				this.queryData.snCode = ''
			},

			/**
			 * 清空入库单号输入框
			 */
			clearRecptCode() {
				this.queryData.recptCode = ''
			},

			// ========== SN信息卡片相关方法 ==========

			/**
			 * 关闭SN信息卡片
			 * 清空当前SN信息、选中仓库数据、扫描库位编码和备注信息
			 */
			closeSnCard() {
				this.currentSnInfo = null
				this.selectedWarehouseData = null
				this.scannedAreaCode = ''
				this.locationRemark = '' // 清空备注
			},

			/**
			 * 仓库选择变化回调
			 * @param {Object} data - 选中的仓库数据，包含warehouse、location、area信息
			 */
			onWarehouseSelected(data) {
				this.selectedWarehouseData = data
				console.log('仓库选择变化:', data)
			},

			/**
			 * 更新SN仓位信息
			 * 包括仓库、库区、库位和备注信息的更新
			 */

			/**
			 * 确认当前SN
			 * 将SN状态更新为已确认，并保存确认人和确认时间
			 */
			confirmCurrentSn() {
				// 校验仓库/库区/库位选择
				if (!this.selectedWarehouseData || !this.selectedWarehouseData.warehouse) {
					uni.showToast({
						title: '请选择仓库',
						icon: 'none'
					})
					return
				}

				if (!this.selectedWarehouseData.location) {
					uni.showToast({
						title: '请选择库区',
						icon: 'none'
					})
					return
				}

				if (!this.selectedWarehouseData.area) {
					uni.showToast({
						title: '请选择库位',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '确认SN中...'
				})

				const updateData = {
					detailId: this.currentSnInfo.detailId,
					warehouseId: this.selectedWarehouseData.warehouseId,
					warehouseName: this.selectedWarehouseData.warehouseName,
					locationId: this.selectedWarehouseData.locationId,
					locationName: this.selectedWarehouseData.locationName,
					areaId: this.selectedWarehouseData.areaId,
					areaName: this.selectedWarehouseData.areaName,
					areaCode: this.selectedWarehouseData.areaCode,
					remark: this.locationRemark.trim() || ''
				}

				confirmSnDetail(updateData).then(response => {
					const resData = response && response.data ? response.data : {}

					// 用返回数据更新当前SN信息（包含仓位、备注、确认信息）
					this.currentSnInfo.warehouseName = resData.warehouseName || this.selectedWarehouseData.warehouseName
					this.currentSnInfo.locationName = resData.locationName || this.selectedWarehouseData.locationName
					this.currentSnInfo.areaName = resData.areaName || this.selectedWarehouseData.areaName
					this.currentSnInfo.areaCode = resData.areaCode || this.selectedWarehouseData.areaCode
					this.currentSnInfo.remark = resData.remark || this.locationRemark.trim()
					this.currentSnInfo.confirmStatus = resData.confirmStatus || 'Y'
					this.currentSnInfo.confirmBy = resData.confirmBy || this.$store.getters.name || '当前用户'
					this.currentSnInfo.confirmTime = resData.confirmTime || new Date().toLocaleString()

					// 同步更新入库单数据结构
					this.updateSnInfoInInboundInfo(this.currentSnInfo)
					this.updateSnStatusInInboundInfo(this.currentSnInfo.sn, this.currentSnInfo.confirmStatus)

					uni.showToast({
						title: 'SN确认成功',
						icon: 'success'
					})
				}).catch(error => {
					console.error('确认SN失败:', error)
					uni.showToast({
						title: '确认失败',
						icon: 'none'
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},

			/**
			 * 显示SN信息卡片
			 * @param {Object} data - SN数据，包含sn字段
			 */
			showSnInfoCard(data) {
				// 从入库明细中找到对应的SN信息
				let snInfo = null
				for (const line of this.recptLines) {
					if (line.details) {
						const detail = line.details.find(d => d.sn === data.snCode)
						if (detail) {
							snInfo = {
								detailId: detail.detailId,
								sn: detail.sn,
								itemCode: line.itemCode,
								itemName: line.itemName,
								warehouseName: detail.warehouseName,
								locationName: detail.locationName,
								areaName: detail.areaName,
								areaCode: detail.areaCode,
								remark: detail.remark || '', // 添加备注信息
								confirmStatus: detail.confirmStatus || 'N',
								confirmBy: detail.confirmBy,
								confirmTime: detail.confirmTime,
								snWgbm: detail.snWgbm, //外观编码
								snDf: detail.snDf, //电伏数
							}
							break
						}
					}
				}

				if (snInfo) {
					this.currentSnInfo = snInfo

					// 如果已有库位编码，设置扫描的库位编码
					if (snInfo.areaCode) {
						this.scannedAreaCode = snInfo.areaCode
					}

					// 如果已有备注，设置备注信息
					if (snInfo.remark) {
						this.locationRemark = snInfo.remark
					}
				}
			},

			/**
			 * 更新入库单中的SN状态
			 * @param {string} sn - SN
			 * @param {string} status - 状态值
			 */
			updateSnStatusInInboundInfo(sn, status) {
				this.recptLines.forEach(line => {
					if (line.details) {
						line.details.forEach(detail => {
							if (detail.sn === sn) {
								detail.confirmStatus = status
								detail.confirmBy = this.$store.getters.name || '当前用户'
								detail.confirmTime = new Date().toLocaleString()
							}
						})
					}
				})
			},

			/**
			 * 更新入库单中的SN信息（仓位、备注等）
			 * @param {Object} snInfo - SN信息对象
			 */
			updateSnInfoInInboundInfo(snInfo) {
				this.recptLines.forEach(line => {
					if (line.details) {
						line.details.forEach(detail => {
							if (detail.sn === snInfo.sn) {
								detail.warehouseName = snInfo.warehouseName
								detail.locationName = snInfo.locationName
								detail.areaName = snInfo.areaName
								detail.areaCode = snInfo.areaCode
								detail.remark = snInfo.remark
								if (snInfo.confirmStatus) {
									detail.confirmStatus = snInfo.confirmStatus
									detail.confirmBy = snInfo.confirmBy
									detail.confirmTime = snInfo.confirmTime
								}
							}
						})
					}
				})
			},


			// SN码扫描确认
			handleSnScanConfirm() {
				if (!this.queryData.snCode.trim()) {
					uni.showToast({
						title: '请输入SN码',
						icon: 'none'
					})
					return
				}
				this.handleQuery()
			},

			// 入库单号确认
			handleRecptCodeConfirm() {
				if (!this.queryData.recptCode.trim()) {
					uni.showToast({
						title: '请输入入库单号',
						icon: 'none'
					})
					return
				}
				this.handleQuery()
			},

			// 执行查询
			handleQuery() {
				uni.showLoading({
					title: '查询中...'
				})

				const apiCall = this.currentTab === 'sn' 
					? getInboundBySnCode(this.queryData.snCode)
					: getInboundByRecptCode(this.queryData.recptCode)

				apiCall.then(response => {
					if (response.code === 200 && response.data) {
						const data = response.data
						this.inboundInfo = data.recptHeader
						this.recptLines = data.recptLines || []
						this.totalLines = data.totalLines || 0
						this.totalDetails = data.totalDetails || 0

						// 如果是扫描SN查询，显示SN信息卡片
						if (this.currentTab === 'sn' && data.snCode) {
							this.showSnInfoCard(data)
						} else if (this.currentTab === 'recptCode') {
							// 如果是按入库单号查询，关闭可能存在的SN卡片
							this.closeSnCard()
						}

						// 静默刷新，不显示成功提示
					} else {
						uni.showToast({
							title: response.msg || '查询失败',
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('查询失败:', error)
				}).finally(() => {
					uni.hideLoading()
				})
			},

			// 显示行详情
			showLineDetails(line) {
				this.currentLine = line
				this.currentLineDetails = line.details || []
				this.showSnDetailModal = true
			},

			// 关闭SN详情弹窗
			closeSnDetailModal() {
				this.showSnDetailModal = false
				this.currentLine = null
				this.currentLineDetails = []
			},

			// 确认SN
			confirmSn(snDetail) {
				uni.showLoading({
					title: '确认中...'
				})

				scanInboundConfirm(snDetail.sn).then(response => {
					// 更新SN状态
					snDetail.confirmStatus = 'Y'
					snDetail.confirmBy = 'admin' // 这里应该从用户信息获取
					snDetail.confirmTime = new Date().toLocaleString()

					uni.showToast({
						title: '确认成功',
						icon: 'success'
					})
				}).catch(error => {
					console.error('确认失败:', error)
				}).finally(() => {
					uni.hideLoading()
				})
			},

			// 获取确认状态文本
			getConfirmStatusText(status) {
				return status === 'Y' ? '已确认' : '未确认'
			},

			// 获取确认状态样式类
			getConfirmStatusClass(status) {
				return status === 'Y' ? 'confirm-status-confirmed' : 'confirm-status-pending'
			},

			// 获取确认进度
			getConfirmProgress(line) {
				if (!line.details || line.details.length === 0) {
					return '0/0'
				}
				const confirmedCount = line.details.filter(detail => detail.confirmStatus === 'Y').length
				return `${confirmedCount}/${line.details.length}`
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'PREPARE': '草稿',
					'CONFIRMED': '已确认',
					'APPROVING': '审批中',
					'APPROVED': '已审批',
					'FINISHED': '已完成',
					'CANCELED': '已取消'
				}
				return statusMap[status] || status
			},

			// 获取状态样式类
			getStatusClass(status) {
				const classMap = {
					'PREPARE': 'status-prepare',
					'CONFIRMED': 'status-confirmed',
					'APPROVING': 'status-approving',
					'APPROVED': 'status-approved',
					'FINISHED': 'status-finished',
					'CANCELED': 'status-canceled'
				}
				return classMap[status] || 'status-default'
			},

			// 提交入库单
			handleSubmit() {
				if (!this.inboundInfo) {
					uni.showToast({
						title: '请先查询入库单',
						icon: 'none'
					})
					return
				}

				// 检查是否所有SN都已确认
				const allConfirmed = this.recptLines.every(line =>
					line.details && line.details.every(detail => detail.confirmStatus === 'Y')
				)

				if (!allConfirmed) {
					// 检查具体哪一行还有未确认的SN
					const unconfirmedLines = []
					for (let i = 0; i < this.recptLines.length; i++) {
						const line = this.recptLines[i]
						if (line.details) {
							const unconfirmedSns = line.details.filter(detail => detail.confirmStatus !== 'Y')
							if (unconfirmedSns.length > 0) {
								unconfirmedLines.push({
									lineNumber: i + 1,
									productName: line.itemName,
									unconfirmedCount: unconfirmedSns.length,
									totalCount: line.details.length
								})
							}
						}
					}

					if (unconfirmedLines.length > 0) {
						const message =
							`第${unconfirmedLines[0].lineNumber}行还有${unconfirmedLines[0].unconfirmedCount}个SN未确认`
						uni.showToast({
							title: message,
							icon: 'none',
							duration: 3000
						})
						return
					}
				}

				uni.showLoading({
					title: '提交入库单中...'
				})

				// 调用后端执行入库接口
				executeInbound(this.inboundInfo.recptId).then(response => {
					// 更新入库单状态
					this.inboundInfo.status = 'FINISHED'
					
					uni.showToast({
						title: '入库单提交成功',
						icon: 'success'
					})

					// 重置数据并返回
					this.queryData = { snCode: '', recptCode: '' }
					this.inboundInfo = null
					this.recptLines = []
					this.currentSnInfo = null
					this.selectedWarehouseData = null
					this.locationRemark = ''

					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}).catch(error => {

				}).finally(() => {
					uni.hideLoading()
				})
			},

			// ========== 入库记录相关方法 ==========

			/**
			 * 加载入库记录列表
			 * 根据接口文档，只传入pageNum和pageSize参数
			 */
			async loadInboundRecords() {
				if (this.recordLoading) return

				this.recordLoading = true
				
				try {
					const params = {
						pageNum: this.recordPageNum,
						pageSize: this.recordPageSize
					}

					const response = await getConfirmDetail(params)
					
					if (response.code === 200) {
						this.recordTotal = response.total || 0
						this.inboundRecords = response.rows || []
						
						// 静默刷新，不显示成功提示
					} else {
						uni.showToast({
							title: response.msg || '查询失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('查询入库记录失败:', error)
					uni.showToast({
						title: '查询失败',
						icon: 'none'
					})
				} finally {
					this.recordLoading = false
				}
			},

			/**
			 * 刷新入库记录列表
			 */
			refreshInboundRecords() {
				this.recordPageNum = 1
				this.inputPageNum = 1
				this.loadInboundRecords()
			},

			/**
			 * 跳转到指定页码
			 * @param {number} pageNum - 目标页码
			 */
			goToPage(pageNum) {
				const totalPages = Math.ceil(this.recordTotal / this.recordPageSize)
				
				if (pageNum < 1 || pageNum > totalPages) {
					uni.showToast({
						title: '页码超出范围',
						icon: 'none'
					})
					return
				}

				this.recordPageNum = pageNum
				this.inputPageNum = pageNum
				this.loadInboundRecords()
			},

			/**
			 * 跳转到输入框指定的页码
			 */
			goToInputPage() {
				const pageNum = parseInt(this.inputPageNum)
				
				if (isNaN(pageNum) || pageNum < 1) {
					uni.showToast({
						title: '请输入有效的页码',
						icon: 'none'
					})
					this.inputPageNum = this.recordPageNum
					return
				}

				this.goToPage(pageNum)
			},

			/**
			 * 格式化确认时间显示
			 * @param {string} confirmTime - 确认时间
			 * @returns {string} 格式化后的时间
			 */
			formatConfirmTime(confirmTime) {
				if (!confirmTime) return ''
				try {
					const date = new Date(confirmTime)
					const year = date.getFullYear()
					const month = String(date.getMonth() + 1).padStart(2, '0')
					const day = String(date.getDate()).padStart(2, '0')
					const hours = String(date.getHours()).padStart(2, '0')
					const minutes = String(date.getMinutes()).padStart(2, '0')
					const seconds = String(date.getSeconds()).padStart(2, '0')
					return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
				} catch (error) {
					return confirmTime
				}
			},

			/**
			 * 显示记录详细信息
			 * @param {Object} record - 记录对象
			 */
				showRecordDetail(record) {
					this.currentRecord = record
					this.showRecordDetailModal = true
				},

				closeRecordDetailModal() {
					this.showRecordDetailModal = false
					this.currentRecord = null
				}

		}
	}
</script>

<style lang="scss" scoped>
	.product-inbound-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.submit-section {
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #f0f0f0;

		.submit-btn {
			width: 100%;
			height: 80rpx;
			background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
			border: none;
			border-radius: 12rpx;
			box-shadow: 0 4rpx 15rpx rgba(0, 122, 255, 0.3);

			.submit-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
			}

			&:active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
			}
		}
	}

	.scan-section {
		background: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;

		.scan-header {
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.scan-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}

			.scan-tabs {
				display: flex;
				gap: 20rpx;

				.tab-item {
					padding: 10rpx 20rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					color: #666;
					background: #f5f5f5;

					&.active {
						background: #007AFF;
						color: #fff;
					}
				}
			}
		}

		.scan-input-area {
			padding: 30rpx;

			.input-group {
				margin-bottom: 30rpx;

				.input-label {
					display: block;
					font-size: 28rpx;
					color: #333;
					margin-bottom: 15rpx;
				}

				.input-wrapper {
					position: relative;
					display: flex;
					align-items: center;

					.input-icon-left {
						position: absolute;
						left: 20rpx;
						z-index: 1;
					}

					.scan-input {
						flex: 1;
						height: 80rpx;
						padding: 0 20rpx 0 60rpx;
						border: 1rpx solid #ddd;
						border-radius: 8rpx;
						font-size: 28rpx;
						background: #fff;

						&:disabled {
							background: #f5f5f5;
							color: #999;
						}
					}

					.input-icon {
						position: absolute;
						right: 20rpx;
						z-index: 1;
					}
				}
			}

			.confirm-btn {
				width: 100%;
				height: 80rpx;
				background: #007AFF;
				color: #fff;
				border: none;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.info-display-area {
		margin: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		min-height: 200rpx;

		.info-content {
			padding: 30rpx;

			.in-stock-info,
			.material-info {
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.info-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					padding-bottom: 15rpx;
					border-bottom: 1rpx solid #f0f0f0;

					.info-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
					}

					.info-status {
						padding: 8rpx 16rpx;
						border-radius: 20rpx;
						font-size: 22rpx;

						&.status-prepare {
							background: #e2e3e5;
							color: #383d41;
						}

						&.status-pending {
							background: #fff3cd;
							color: #856404;
						}

						&.status-processing {
							background: #d1ecf1;
							color: #0c5460;
						}

						&.status-completed {
							background: #d4edda;
							color: #155724;
						}

						&.status-cancelled {
							background: #f8d7da;
							color: #721c24;
						}

						&.status-draft {
							background: #f8f9fa;
							color: #6c757d;
						}

						&.status-submitted {
							background: #cce5ff;
							color: #004085;
						}

						&.status-approved {
							background: #d1ecf1;
							color: #0c5460;
						}

						&.status-rejected {
							background: #f8d7da;
							color: #721c24;
						}

						&.status-default {
							background: #e2e3e5;
							color: #383d41;
						}
					}
				}

				.info-details {
					.info-row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 15rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.info-label {
							font-size: 26rpx;
							color: #666;
							min-width: 120rpx;
						}

						.info-value {
							font-size: 26rpx;
							color: #333;
							flex: 1;
							text-align: right;
						}
					}
				}
			}

			.info-placeholder {
				text-align: center;
				color: #999;
				font-size: 28rpx;
				padding: 40rpx 0;
			}
		}
	}


	.result {
		margin-top: 20rpx;
		padding: 20rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
	}

	.result text {
		display: block;
		margin-bottom: 10rpx;
	}

	/* 新增样式 */
	.display-mode-controls {
		display: flex;
		gap: 10rpx;
		margin: 20rpx 0;
		flex-wrap: wrap;

		.mode-btn {
			flex: 1;
			min-width: 120rpx;
			height: 60rpx;
			background: #f5f5f5;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #333;

			&:active {
				background: #e0e0e0;
			}
		}
	}

	/* 新增入库确认相关样式 */
	.query-section {
		margin: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid rgba(0, 122, 255, 0.1);

		.query-header {
			padding: 30rpx;
			background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
			border-radius: 20rpx 20rpx 0 0;

			.query-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
				margin-bottom: 20rpx;
			}


				.query-tabs {
					display: flex;
					gap: 60rpx;
					justify-content: center;
					padding: 0 20rpx;

					.tab-item {
						padding: 20rpx 40rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
						color: rgba(255, 255, 255, 0.8);
						background: rgba(255, 255, 255, 0.1);
						transition: all 0.2s ease;
						font-weight: 500;
						border: 2rpx solid transparent;
						position: relative;
						min-width: 120rpx;
						text-align: center;
						cursor: pointer;

						&.active {
							background: #ffffff !important;
							color: #007AFF !important;
							box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
							font-weight: 700;
							border: 2rpx solid #ffffff;
							transform: translateY(-2rpx);
						}

						&:hover:not(.active) {
							background: rgba(255, 255, 255, 0.25);
							transform: translateY(-1rpx);
						}

						&:active {
							transform: translateY(0);
						}
					}
				}
		}
	}

	.query-input-area {
		padding: 30rpx;

		.input-group {
			margin-bottom: 30rpx;

			.input-label {
				display: block;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 15rpx;
				font-weight: 500;
			}

			.input-wrapper {
				position: relative;
				display: flex;
				align-items: center;

				.query-input {
					flex: 1;
					height: 80rpx;
					padding: 0 100rpx 0 20rpx;
					border: 2rpx solid #e0e0e0;
					border-radius: 12rpx;
					font-size: 28rpx;
					color: #333;
					background: #fff;
					transition: all 0.3s ease;

					&:focus {
						border-color: #007AFF;
						box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
					}
				}

				.input-icon {
					position: absolute;
					padding: 10rpx;
					border-radius: 50%;
					transition: all 0.3s ease;

					&:active {
						background: rgba(0, 0, 0, 0.1);
						transform: scale(0.95);
					}

					&.scan-icon {
						right: 50rpx;
						background: rgba(0, 122, 255, 0.1);

						&:active {
							background: rgba(0, 122, 255, 0.2);
						}
					}

					&.clear-icon {
						right: 15rpx;
					}
				}
			}
		}

	}

	.inbound-info-section {
		margin: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid rgba(0, 122, 255, 0.1);

		.info-header {
			padding: 30rpx;
			background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.info-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
			}

			.info-status {
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				background: rgba(255, 255, 255, 0.2);
				color: #fff;

				&.status-prepare {
					background: #e2e3e5;
					color: #383d41;
				}

				&.status-confirmed {
					background: #74b9ff;
					color: #ffffff;
				}

				&.status-approving {
					background: #74b9ff;
					color: #ffffff;
				}

				&.status-approved {
					background: #74b9ff;
					color: #ffffff;
				}

				&.status-finished {
					background: #d4edda;
					color: #155724;
				}

				&.status-canceled {
					background: #f8d7da;
					color: #721c24;
				}
			}
		}

		.info-content {
			padding: 30rpx;

			.info-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15rpx 0;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				.info-label {
					font-size: 28rpx;
					color: #666;
					font-weight: 500;
				}

				.info-value {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}

				&.combined-row {
					background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(90, 200, 250, 0.05) 100%);
					border-radius: 12rpx;
					padding: 16rpx 20rpx;
					margin: 8rpx 0;
					border: 1rpx solid rgba(0, 122, 255, 0.1);

					.info-label {
						color: #007AFF;
						font-weight: 600;
					}

					.combined-value {
						color: #007AFF;
						font-weight: 600;
						font-size: 28rpx;
						text-shadow: 0 1rpx 2rpx rgba(0, 122, 255, 0.1);
					}
				}
			}
		}
	}

	.details-section {
		margin: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid rgba(0, 122, 255, 0.1);
		overflow: hidden; // 防止内容超出容器边界

		.section-header {
			padding: 30rpx;
			background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
			}

			.section-count {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}

	.details-table {
		overflow-x: auto; // 允许水平滚动
		width: 100%; // 确保表格容器占满父容器宽度

		.table-header {
			display: flex;
			background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
			border-bottom: 2rpx solid #dee2e6;
			min-width: 900rpx; // 调整最小宽度为实际需要的宽度

			.table-cell {
				padding: 15rpx 8rpx;
				font-size: 22rpx;
				font-weight: bold;
				color: #495057;
				text-align: center;
				border-right: 1rpx solid #dee2e6;
				word-break: keep-all;
				white-space: nowrap;

				&:last-child {
					border-right: none;
				}

				// 为不同列设置合适的宽度 - 7列布局（已移除行号列）
				&:nth-child(1) {
					// 产品编码
					flex: 0 0 120rpx;
					min-width: 120rpx;
					font-size: 22rpx;
				}

				&:nth-child(2) {
					// 产品名称
					flex: 0 0 140rpx;
					min-width: 140rpx;
					text-align: left;
					white-space: normal;
					word-break: break-all;
					font-size: 22rpx;
					line-height: 1.3;
				}

				&:nth-child(3) {
					// 规格型号
					flex: 0 0 160rpx;
					min-width: 160rpx;
					text-align: left;
					white-space: normal;
					word-break: break-all;
					font-size: 22rpx;
					line-height: 1.3;
				}

				&:nth-child(4) {
					// 入库数量
					flex: 0 0 80rpx;
					min-width: 80rpx;
					font-size: 22rpx;
				}

				&:nth-child(5) {
					// 明细数
					flex: 0 0 60rpx;
					min-width: 60rpx;
					font-size: 22rpx;
				}

				&:nth-child(6) {
					// 确认进度
					flex: 0 0 100rpx;
					min-width: 100rpx;
					font-size: 22rpx;
				}

				&:nth-child(7) {
					// 操作
					flex: 0 0 120rpx;
					min-width: 120rpx;
				}
			}
		}

		.table-body {
			min-width: 860rpx; // 调整最小宽度为实际需要的宽度

			.table-row {
				display: flex;
				border-bottom: 1rpx solid #f0f0f0;
				transition: all 0.3s ease;

				&:hover {
					background: rgba(0, 122, 255, 0.05);
				}

				&:last-child {
					border-bottom: none;
				}

				.table-cell {
					padding: 15rpx 8rpx;
					font-size: 22rpx;
					color: #666;
					text-align: center;
					border-right: 1rpx solid #f0f0f0;
					word-break: keep-all;
					white-space: nowrap;

					&:last-child {
						border-right: none;
					}

					// 为不同列设置合适的宽度，与header保持一致 - 7列布局（已移除行号列）
					&:nth-child(1) {
						// 产品编码
						flex: 0 0 120rpx;
						min-width: 120rpx;
						font-size: 22rpx;
					}

					&:nth-child(2) {
						// 产品名称
						flex: 0 0 140rpx;
						min-width: 140rpx;
						text-align: left;
						white-space: normal;
						word-break: break-all;
						font-size: 22rpx;
						line-height: 1.3;
					}

					&:nth-child(3) {
						// 规格型号
						flex: 0 0 160rpx;
						min-width: 160rpx;
						text-align: left;
						white-space: normal;
						word-break: break-all;
						font-size: 22rpx;
						line-height: 1.3;
					}

					&:nth-child(4) {
						// 入库数量
						flex: 0 0 80rpx;
						min-width: 80rpx;
						font-size: 22rpx;
					}

					&:nth-child(5) {
						// 明细数
						flex: 0 0 60rpx;
						min-width: 60rpx;
						font-size: 22rpx;
					}

					&:nth-child(6) {
						// 确认进度
						flex: 0 0 100rpx;
						min-width: 100rpx;
						font-size: 22rpx;

						.progress-text {
							color: #007AFF;
							font-weight: 600;
						}
					}

					&:nth-child(7) {
						// 操作
						flex: 0 0 120rpx;
						min-width: 120rpx;

						.detail-btn {
							padding: 6rpx 12rpx;
							background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
							color: #fff;
							border: none;
							border-radius: 6rpx;
							font-size: 20rpx;
							box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
							transition: all 0.3s ease;
							white-space: nowrap;

							&:active {
								transform: translateY(1rpx);
								box-shadow: 0 1rpx 4rpx rgba(0, 122, 255, 0.3);
							}

							&:disabled {
								background: #ccc;
								box-shadow: none;
								transform: none;
							}
						}
					}
				}
			}
		}
	}

.sn-detail-modal,
.record-detail-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(8rpx);
		z-index: 1000;
		display: flex;
		align-items: flex-end;
		animation: fadeIn 0.3s ease;

		@keyframes fadeIn {
			from {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}

		.modal-content {
			background: #fff;
			border-radius: 24rpx 24rpx 0 0;
			width: 100%;
			max-height: 80vh;
			box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.2);
			animation: slideUp 0.3s ease;

			@keyframes slideUp {
				from {
					transform: translateY(100%);
				}

				to {
					transform: translateY(0);
				}
			}

			.modal-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx;
				background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
				border-radius: 24rpx 24rpx 0 0;

				.modal-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #2c3e50;
					text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
				}

				.modal-close {
					padding: 12rpx;
					border-radius: 50%;
					transition: all 0.3s ease;

					&:active {
						background: rgba(0, 0, 0, 0.05);
						transform: scale(0.9);
					}
				}
			}

			.modal-body {
				padding: 30rpx;
				overflow-y: auto;

				.product-summary {
					background: #f8f9fa;
					border-radius: 8rpx;
					padding: 20rpx;
					margin-bottom: 20rpx;

					.summary-row {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.summary-label {
							font-size: 24rpx;
							color: #666;
						}

						.summary-value {
							font-size: 24rpx;
							color: #333;
							font-weight: bold;
						}
					}
				}

				.modal-actions {
					display: flex;
					gap: 20rpx;

					.action-btn {
						flex: 1;
						height: 80rpx;
						border-radius: 8rpx;
						font-size: 28rpx;
						font-weight: bold;

						&.cancel {
							background: #f8f9fa;
							color: #666;
							border: 1rpx solid #ddd;
						}

						&.confirm {
							background: #007AFF;
							color: #fff;
							border: none;
						}
					}
				}
			}
		}
	}

/* 入库记录详情列表样式 */
.record-detail-list {
	background: #f8f9fa;
	border-radius: 12rpx;
	padding: 20rpx;
	border: 1rpx solid #eee;

	.detail-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}

		.detail-label {
			font-size: 26rpx;
			color: #666;
			min-width: 160rpx;
		}

		.detail-value {
			font-size: 26rpx;
			color: #333;
			flex: 1;
			text-align: right;
			word-break: break-all;
		}
	}
}

/* 将入库记录详情改为居中弹窗样式 */
.record-detail-modal {
	align-items: center;
	justify-content: center;

	.modal-content {
		width: 86%;
		max-width: 900rpx;
		max-height: 80vh; /* 增加整体高度限制 */
		border-radius: 20rpx;
		box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.2);
		animation: scaleIn 0.22s ease;
		display: flex;
		flex-direction: column; /* 确保垂直布局 */
	}

	@keyframes scaleIn {
		from { transform: scale(0.95); opacity: 0; }
		to { transform: scale(1); opacity: 1; }
	}

	.modal-header {
		background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
		border-radius: 20rpx 20rpx 0 0;
		flex-shrink: 0; /* 头部不收缩 */
	}

	.modal-body {
		flex: 1; /* 占据剩余空间 */
		overflow-y: auto; /* 内容区域可滚动 */
		min-height: 0; /* 允许flex子项收缩 */
		padding: 30rpx;
		
		.record-detail-list {
			margin-bottom: 20rpx; /* 与底部按钮保持间距 */
		}
	}

	.modal-actions {
		flex-shrink: 0; /* 底部按钮不收缩 */
		padding: 0 30rpx 30rpx 30rpx; /* 调整底部间距 */
	}
}

	.sn-detail-table {
		margin-bottom: 30rpx;

		.table-header {
			display: flex;
			background: #f8f9fa;
			border-radius: 8rpx 8rpx 0 0;

			.table-cell {
				flex: 1;
				padding: 15rpx 8rpx;
				font-size: 20rpx;
				font-weight: bold;
				color: #333;
				text-align: center;

				&:first-child {
					flex: 2; // SN码列更宽
				}

				&:nth-child(2) {
					flex: 1.5; // 确认状态列中等宽度
				}

				&:last-child {
					flex: 1.5; // 操作列中等宽度
				}
			}
		}

		.table-body {
			.table-row {
				display: flex;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
					border-radius: 0 0 8rpx 8rpx;
				}

				.table-cell {
					flex: 1;
					padding: 15rpx 8rpx;
					font-size: 20rpx;
					color: #666;
					text-align: center;

					&:first-child {
						flex: 2; // SN码列更宽
						font-weight: 500;
						color: #333;
					}

					&:nth-child(2) {
						flex: 1.5; // 确认状态列中等宽度
					}

					&:last-child {
						flex: 1.5; // 操作列中等宽度
					}

					.status-tag {
						padding: 4rpx 12rpx;
						border-radius: 12rpx;
						font-size: 18rpx;
						font-weight: bold;

						&.confirm-status-confirmed {
							background: #d4edda;
							color: #155724;
						}

						&.confirm-status-pending {
							background: #fff3cd;
							color: #856404;
						}
					}

					.confirm-btn {
						padding: 6rpx 12rpx;
						border-radius: 4rpx;
						font-size: 18rpx;
						border: none;
						background: #28a745;
						color: #fff;

						&:disabled {
							background: #6c757d;
						}
					}
				}
			}
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100rpx);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	/* SN信息卡片样式 */
	.sn-card-section {
		margin: 20rpx;
		animation: slideUp 0.3s ease-out;
	}

	.sn-card {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid rgba(0, 122, 255, 0.1);
		overflow: hidden;
	}

	.sn-card-header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.sn-card-title {
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
		}

		.sn-card-close {
			padding: 10rpx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.2);
			transition: all 0.3s ease;

			&:active {
				background: rgba(255, 255, 255, 0.3);
				transform: scale(0.95);
			}
		}
	}

	.sn-card-content {
		padding: 30rpx;

		.sn-info-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15rpx 0;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.sn-info-label {
				font-size: 28rpx;
				color: #666;
				font-weight: 500;
			}

			.sn-info-value {
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
				text-align: right;
				flex: 1;
				margin-left: 20rpx;
			}
		}
	}

	.location-edit-section {
		margin: 20rpx 30rpx;
		padding: 30rpx;
		background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(90, 200, 250, 0.05) 100%);
		border-radius: 16rpx;
		border: 1rpx solid rgba(0, 122, 255, 0.1);

		.location-edit-header {
			margin-bottom: 20rpx;

			.location-edit-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #007AFF;
			}
		}

		.location-edit-content {
			.location-input-group {
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.location-input-label {
					display: block;
					font-size: 26rpx;
					color: #666;
					margin-bottom: 10rpx;
					font-weight: 500;
				}

				.remark-input-wrapper {
					position: relative;

					.remark-textarea {
						width: 100%;
						min-height: 120rpx;
						padding: 20rpx;
						border: 1rpx solid #ddd;
						border-radius: 8rpx;
						font-size: 28rpx;
						background: #fff;
						box-sizing: border-box;

						&:focus {
							border-color: #007AFF;
						}
					}

					.remark-counter {
						position: absolute;
						bottom: 10rpx;
						right: 15rpx;
						font-size: 22rpx;
						color: #999;
						background: rgba(255, 255, 255, 0.8);
						padding: 2rpx 8rpx;
						border-radius: 4rpx;
					}
				}

				// warehouse组件样式
				:deep(.picker) {
					padding: 20rpx;
					background: #fff;
					border-radius: 12rpx;
					border: 2rpx solid #e0e0e0;
					font-size: 28rpx;
					color: #333;
					transition: all 0.3s ease;
					text-align: center;

					&:active {
						border-color: #007AFF;
						box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
					}
				}
			}
		}
	}

	.sn-card-actions {
		padding: 30rpx;
		display: flex;
		gap: 20rpx;

		.action-btn {
			flex: 1;
			height: 80rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			font-size: 28rpx;
			font-weight: bold;
			transition: all 0.3s ease;
			border: none;

			&.update-location {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				color: #fff;
				box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);

				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
				}

				&:disabled {
					background: #e0e0e0;
					color: #999;
					box-shadow: none;
					transform: none;
				}
			}

			&.confirm-sn {
				background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
				color: #fff;
				box-shadow: 0 4rpx 16rpx rgba(40, 167, 69, 0.3);

				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 2rpx 8rpx rgba(40, 167, 69, 0.3);
				}

				&:disabled {
					background: #e0e0e0;
					color: #999;
					box-shadow: none;
					transform: none;
				}
			}
		}
	}

	.confirmed-status {
		padding: 30rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		background: linear-gradient(135deg, rgba(82, 196, 26, 0.1) 0%, rgba(82, 196, 26, 0.05) 100%);
		border: 1rpx solid rgba(82, 196, 26, 0.2);
		border-radius: 12rpx;
		margin: 0 30rpx 20rpx 30rpx;

		.status-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			background: rgba(82, 196, 26, 0.1);
			border-radius: 50%;
		}

		.status-text {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 8rpx;

			.status-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #52c41a;
			}

			.status-info {
				font-size: 24rpx;
				color: #666;
				line-height: 1.4;
			}
		}
	}

	/* 入库记录相关样式 */
	.inbound-records-section {
		margin: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		border: 1rpx solid rgba(0, 122, 255, 0.1);
		overflow: hidden;

		.records-header {
			padding: 20rpx 30rpx;
			background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.records-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #fff;
			}

				.records-actions {
					.refresh-btn {
						display: flex;
						align-items: center;
						gap: 6rpx;
						padding: 8rpx 16rpx;
						background: rgba(255, 255, 255, 0.2);
						color: #fff;
						border: none;
						border-radius: 16rpx;
						font-size: 20rpx;
						transition: all 0.3s ease;
						height: 40rpx;
						line-height: 40rpx;

					&:active {
						background: rgba(255, 255, 255, 0.3);
						transform: scale(0.95);
					}

					&:disabled {
						opacity: 0.5;
						transform: none;
					}
				}
			}
		}

		.records-stats {
			padding: 20rpx 30rpx;
			background: linear-gradient(135deg, rgba(23, 162, 184, 0.05) 0%, rgba(32, 201, 151, 0.05) 100%);
			border-bottom: 1rpx solid #f0f0f0;
			display: flex;
			gap: 40rpx;

			.stats-item {
				display: flex;
				align-items: center;
				gap: 8rpx;

				.stats-label {
					font-size: 24rpx;
					color: #666;
				}

				.stats-value {
					font-size: 24rpx;
					color: #17a2b8;
					font-weight: bold;
				}
			}
		}

		.records-table {
			overflow-x: auto;
			width: 100%;
			border: 1rpx solid #dee2e6;
			border-radius: 8rpx;
			-webkit-overflow-scrolling: touch; // 移动端滚动优化

			.table-header {
				display: flex;
				background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
				border-bottom: 2rpx solid #dee2e6;
				min-width: 1800rpx; // 增加最小宽度

				.table-cell {
					padding: 12rpx 8rpx;
					font-size: 18rpx;
					font-weight: bold;
					color: #495057;
					text-align: center;
					border-right: 1rpx solid #dee2e6;
					word-break: break-all;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

					&:last-child {
						border-right: none;
					}

					// 为不同列设置合适的宽度，确保内容不溢出
					&:nth-child(1) { flex: 0 0 160rpx; min-width: 160rpx; } // SN
					&:nth-child(2) { flex: 0 0 140rpx; min-width: 140rpx; } // 产品编码
					&:nth-child(3) { flex: 0 0 180rpx; min-width: 180rpx; } // 产品名称
					&:nth-child(4) { flex: 0 0 160rpx; min-width: 160rpx; } // 规格型号
					&:nth-child(5) { flex: 0 0 100rpx; min-width: 100rpx; } // 数量
					&:nth-child(6) { flex: 0 0 140rpx; min-width: 140rpx; } // 批次编码
					&:nth-child(7) { flex: 0 0 120rpx; min-width: 120rpx; } // 仓库
					&:nth-child(8) { flex: 0 0 120rpx; min-width: 120rpx; } // 库区
					&:nth-child(9) { flex: 0 0 140rpx; min-width: 140rpx; } // 库位
					&:nth-child(10) { flex: 0 0 120rpx; min-width: 120rpx; } // 确认人
					&:nth-child(11) { flex: 0 0 180rpx; min-width: 180rpx; } // 确认时间
				}
			}

			.table-body {
				min-width: 1800rpx; // 增加最小宽度

				.table-row {
					display: flex;
					border-bottom: 1rpx solid #f0f0f0;
					transition: all 0.3s ease;
					cursor: pointer;

					&:hover {
						background: rgba(0, 122, 255, 0.05);
					}

					&:active {
						background: rgba(0, 122, 255, 0.1);
					}

					&:last-child {
						border-bottom: none;
					}

					.table-cell {
						padding: 10rpx 8rpx;
						font-size: 18rpx;
						color: #666;
						text-align: center;
						border-right: 1rpx solid #f0f0f0;
						word-break: break-all;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						&:last-child {
							border-right: none;
						}

						// 为不同列设置合适的宽度，与header保持一致
						&:nth-child(1) { flex: 0 0 160rpx; min-width: 160rpx; } // SN
						&:nth-child(2) { flex: 0 0 140rpx; min-width: 140rpx; } // 产品编码
						&:nth-child(3) { flex: 0 0 180rpx; min-width: 180rpx; } // 产品名称
						&:nth-child(4) { flex: 0 0 160rpx; min-width: 160rpx; } // 规格型号
						&:nth-child(5) { flex: 0 0 100rpx; min-width: 100rpx; } // 数量
						&:nth-child(6) { flex: 0 0 140rpx; min-width: 140rpx; } // 批次编码
						&:nth-child(7) { flex: 0 0 120rpx; min-width: 120rpx; } // 仓库
						&:nth-child(8) { flex: 0 0 120rpx; min-width: 120rpx; } // 库区
						&:nth-child(9) { flex: 0 0 140rpx; min-width: 140rpx; } // 库位
						&:nth-child(10) { flex: 0 0 120rpx; min-width: 120rpx; } // 确认人
						&:nth-child(11) { flex: 0 0 180rpx; min-width: 180rpx; } // 确认时间
					}
				}
			}
		}

		.empty-state {
			padding: 80rpx 30rpx;
			text-align: center;

			.empty-icon {
				margin-bottom: 20rpx;
			}

			.empty-text {
				display: block;
				font-size: 28rpx;
				color: #999;
				margin-bottom: 30rpx;
			}

			.empty-btn {
				padding: 16rpx 32rpx;
				background: #007AFF;
				color: #fff;
				border: none;
				border-radius: 20rpx;
				font-size: 26rpx;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
					background: #0056CC;
				}
			}
		}

		.loading-state {
			padding: 40rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 15rpx;

			.loading-icon {
				animation: spin 1s linear infinite;
			}

			.loading-text {
				font-size: 26rpx;
				color: #007AFF;
			}

			@keyframes spin {
				0% { transform: rotate(0deg); }
				100% { transform: rotate(360deg); }
			}
		}

		.pagination-section {
			padding: 30rpx;
			border-top: 1rpx solid #f0f0f0;
			background: #f8f9fa;

			.pagination-info {
				text-align: center;
				margin-bottom: 20rpx;

				.pagination-text {
					font-size: 24rpx;
					color: #666;
				}
			}

			.pagination-controls {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 20rpx;

				.pagination-btn {
					padding: 12rpx 24rpx;
					background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
					color: #fff;
					border: none;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: bold;
					box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
					transition: all 0.3s ease;
					min-width: 100rpx;

					&:active {
						transform: translateY(1rpx);
						box-shadow: 0 1rpx 4rpx rgba(0, 122, 255, 0.3);
					}

					&:disabled {
						background: #ccc;
						box-shadow: none;
						transform: none;
					}
				}

				.page-input-wrapper {
					display: flex;
					align-items: center;
					gap: 8rpx;

					.page-input {
						width: 80rpx;
						height: 60rpx;
						padding: 0 8rpx;
						border: 1rpx solid #ddd;
						border-radius: 6rpx;
						font-size: 24rpx;
						text-align: center;
						background: #fff;

						&:focus {
							border-color: #007AFF;
						}
					}

					.page-total {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}
	}
</style>